<template>
  <div>
    <sky-card-panel title="外链容器">
      <div slot="main" class="containter-form">

        <sky-button type="primary" @click="outsidelink">点击打开外链</sky-button>

      </div>
    </sky-card-panel>

    <sky-hidden-panel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
                  <code class="html">
                    
                         &lt;sky-out-side title="外链标题"&gt;

                          &lt;!-- &lt;div slot="header"&gt;
                            顶部自定义
                          &lt;/div&gt; --&gt;

                          &lt;div slot="main" class="containter-form"&gt;

                              &lt;sky-card-panel title="外链容器"&gt;
                                &lt;div slot="main"&gt;
                                  内容...
                                &lt;/div&gt;
                              &lt;/sky-card-panel&gt;
                              
                          &lt;/div&gt;

                          &lt;div class="SkyOutSideFooter" slot="footer"&gt;
                            &lt;sky-button type="primary" @click="save"&gt;保存&lt;/sky-button&gt;
                            &lt;sky-button type="secondary" @click="cancel"&gt;取消&lt;/sky-button&gt;
                          &lt;/div&gt;

                        &lt;/sky-out-side&gt;
                  </code>
              </pre>
      </div>
    </sky-hidden-panel>

    <sky-card-panel title="固定左侧外链容器">
      <div slot="main" class="containter-form">

        <sky-button type="primary" @click="outsidebarsidelink">点击打开外链</sky-button>

      </div>
    </sky-card-panel>

    <sky-hidden-panel title="代码">
      <div class="prewrap" v-highlight>
        <!-- 使用指令 -->
        <pre>
                  <code class="html">
                    
                      &lt;sky-out-side title="外链标题"&gt;

                        &lt;!-- &lt;div slot="header"&gt;
                              顶部自定义
                            &lt;/div&gt; --&gt;

                      &lt;div slot="selfmain" class="containter-form"&gt;

                        &lt;SkyFixedSidebar :SidebarWith="180" :FixedX="0" :FixedY="50"&gt;
                          &lt;div slot="Sidebar"&gt;
                            &lt;div v-for="item in 6" style="padding:0 20px;line-height:50px;text-align: center;"&gt;
                              左侧边栏
                            &lt;/div&gt;
                          &lt;/div&gt;
                          &lt;div slot="Container"&gt;

                            &lt;sky-card-panel title="标题" v-for="item in 6"&gt;
                              &lt;div slot="main"&gt;
                                内容...
                              &lt;/div&gt;
                            &lt;/sky-card-panel&gt;

                          &lt;/div&gt;
                        &lt;/SkyFixedSidebar&gt;

                      &lt;/div&gt;

                        &lt;div class="SkyOutSideFooter" slot="footer"&gt;
                          &lt;sky-button type="primary" @click="save"&gt;保存&lt;/sky-button&gt;
                          &lt;sky-button type="secondary" @click="cancel"&gt;取消&lt;/sky-button&gt;
                        &lt;/div&gt;

                      &lt;/sky-out-side&gt;
    
                  </code>
              </pre>
      </div>
    </sky-hidden-panel>

  </div>
</template>

<script>
  export default {
    methods: {
      outsidelink () {
        const href = `#/OutSide`
        window.open(href, "_blank");
      },
      outsidebarsidelink () {
        const href = `#/OutSidebarSide`
        window.open(href, "_blank");
      }
    }
  }
</script>

<style lang="scss" scoped>
</style>